<template>

	<el-dialog v-model="dialogVisible" :title="dialogTitle" :before-close="closeDialog" class="elDiaLog" lock-scroll
		width="1000px" :close-on-click-modal="false" :close-on-press-escape="false">
		<div class="form-box list-info" 
			v-loading="loading2" v-if="['act_audit'].includes(dialogStatus)">
		
		 <el-form ref="dataFormRef" :model="formData"  label-width="150px">
				
				
				
				<el-form-item  label="公文编号:" >
					<span>{{dataInfo.doc[0]?.doc_no}}</span>
				</el-form-item>	
				<el-form-item  label="公文标题:" >
					<span style="margin-right: 8px;">{{dataInfo.doc[0]?.title}}</span>
				</el-form-item>	
				<el-form-item  label="机密程度:" >
					<el-tag v-if="dataInfo.doc[0]?.level == 1" type="primary">秘密</el-tag>
					<el-tag v-if="dataInfo.doc[0]?.level == 2" type="warning">机密</el-tag>
					<el-tag v-if="dataInfo.doc[0]?.level == 3" type="danger">绝密</el-tag>
					<el-tag v-if="dataInfo.doc[0]?.level == 0" type="info">未设置</el-tag>
				</el-form-item>	
				
				<el-form-item  label="公文内容:" >
					<div class="artleCo" v-html="dataInfo.doc[0]?.content"></div>
				</el-form-item>	
				<el-form-item  label="申请人:" >
					<span>{{dataInfo.doc[0]?.user.name}}</span>
				</el-form-item>	
				<el-form-item  label="申请时间:" >
					<span>{{dataInfo.doc[0]?.add_time_text}}</span>
				</el-form-item>	
				<el-form-item  label="审核状态:" >
					<span>
						<el-tag
						:type="titModel[dataInfo.status]?.type">{{titModel[dataInfo.status]?.title}}</el-tag>
					</span>
				</el-form-item>	
				<el-form-item  label="处理结果" prop="mark">
					<el-input
					   v-model="formData.mark"
					   :rows="6"
					   type="textarea"
					   placeholder="请输入处理结果"
					 />
				</el-form-item>	
			</el-form>
		</div>
		
		<div class="form-box" v-if="['act_info'].includes(dialogStatus)" v-loading="loading2">
			<el-descriptions size="default" :column="1" border>
			
				
				
				<el-descriptions-item label-class-name="labelC1"
					label="公文编号：">{{dataInfo.doc[0]?.doc_no}}</el-descriptions-item>
				<el-descriptions-item label-class-name="labelC1"
					label="公文标题：">{{dataInfo.doc[0]?.title}}</el-descriptions-item>
				<el-descriptions-item label-class-name="labelC1"
					label="机密程度：">
					<el-tag v-if="dataInfo.doc[0]?.level == 1" type="primary">秘密</el-tag>
					<el-tag v-if="dataInfo.doc[0]?.level == 2" type="warning">机密</el-tag>
					<el-tag v-if="dataInfo.doc[0]?.level == 3" type="danger">绝密</el-tag>
					<el-tag v-if="dataInfo.doc[0]?.level == 0" type="info">未设置</el-tag>
				</el-descriptions-item>	
				<el-descriptions-item label-class-name="labelC1"
					label="公文内容：">
					<div class="artleCo" v-html="dataInfo.doc[0]?.content"></div>
				</el-descriptions-item>
				<el-descriptions-item label-class-name="labelC1"
					label="申请人：">{{dataInfo.doc[0]?.user.name}}
				</el-descriptions-item>
				<el-descriptions-item label-class-name="labelC1"
					label="申请时间：">{{dataInfo.doc[0]?.add_time_text}}
				</el-descriptions-item>
				<el-descriptions-item label-class-name="labelC1"
					label="审核状态："><el-tag
						:type="titModel[dataInfo.status]?.type">{{titModel[dataInfo.status]?.title}}</el-tag>
				</el-descriptions-item>
				<el-descriptions-item label-class-name="labelC1"
					label="处理结果：">{{dataInfo.mark}}
				</el-descriptions-item>
				
			</el-descriptions>
			<el-divider content-position="left">审核日志</el-divider>
			<el-row>
				<el-table border  :data="dataInfo.log" style="width: 100%">
				 
				 <el-table-column label="操作人" width="200">
				   <template #default="scope">
				     <i class="el-icon-user" />
				     {{ scope.row.user.name }}
				   </template>
				 </el-table-column>
				 
				  <el-table-column label="审核状态" align="center" width="150">
				    <template #default="scope">
						<el-tag  :type="titModel[scope.row.status].type">{{titModel[scope.row.status].title}}</el-tag>
				    </template>
				  </el-table-column>
				  <el-table-column label="备注">
				    <template #default="scope">
				      {{ scope.row.mark }}
				    </template>
				  </el-table-column>
				  <el-table-column label="操作日期" width="220">
				    <template #default="scope">
						<el-icon> <el-icon-timer></el-icon-timer></el-icon>
						<span style="margin-left: 10px">{{ scope.row.check_time_text }}</span>
				    </template>
				  </el-table-column>
				</el-table>
			</el-row>
		</div>
		<div class="form-box" v-if="['act_pre'].includes(dialogStatus)" v-loading="loading2">
			 <div class="aletlCo" >
			  <div class="artleTi">
			    <h2 class="artleTiH2">{{ dataInfo.doc[0]?.title }}</h2>
			    <div class="artleTiCo">
			      <span class="artBs">发布时间：{{ dataInfo.doc[0]?.add_time_text }}</span>
			    </div>
			  </div>
			  <div class="artleCo" v-html="dataInfo.doc[0].content"> </div>
			  <div v-if="dataInfo.doc[0]?.files.length > 0">
			    <div class="fujian">
			      附件下载
			    </div>
			    <ul >
			      <li v-for="(item,index) in dataInfo.doc[0]?.files">
			        <el-link :download="item.name" class="fujiana" :href="item.url" :icon="Edit">{{ item.name }}</el-link>
			      </li>
			    </ul>
			  </div>
			</div> 
		
		</div>
		
		
		
		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" v-if="['act_audit'].includes(dialogStatus)"  :loading="loading3" @click="doData('act_doend')">通 过</el-button>
				<el-button type="primary" v-if="['act_audit'].includes(dialogStatus)" :loading="loading3" @click="doData('act_doback')">退 回</el-button>
				<el-button :disabled="loading3" @click="closeDialog">关 闭</el-button>
			</div>
		</template>
	</el-dialog>


</template>
<script setup lang="ts">
	import { useRoute } from 'vue-router';
	import _ from 'lodash-es'
	import { useBaseConfigStore } from "@/store/modules/baseConfig";
	const baseConfigStore = useBaseConfigStore();
	import { BUSINESS_TYPE } from "@/utils/constant";

	//接口地址
	import {
	  getDocExamine
	} from "@/api/doc";

	const props = defineProps({
		//数据列表索引值  例如 user ->对应着 vuex  == user_cxxxxx模块
		dialogTitle: {
			type: String,
			default: "添加信息"
		},
		dialogStatus: {
			type: String,
			default: "add_art"
		},
		dialogTableValue: {
			type: Object,
			default: () => { },
		}
	});
	const titModel = ref([{
		title: '待审核',
		type: 'info',
		value: 0
	}, {
		title: '已通过',
		type: 'success',
		value: 1
	}, {
		title: '已驳回',
		type: 'danger',
		value: 2
	}])
	const emit = defineEmits(['update:modelValue', 'initRefreshList']);
	const dialogVisible = ref(false);
	const loading2 = ref(false);//新增或者修改加载load按钮
	const loading3 = ref(false);//新增或者修改加载load按钮
	// 数据的data-ref
	const dataFormRef = ref(ElForm);
	const dataInfo = ref<any>({});
	const formData = ref<any>({
		id:undefined,
		mark:"",
		status:""
	})
	const rules = reactive<any>({})
	watch(
		() => props.dialogTableValue,
		() => {
			if (['act_info','act_audit','act_pre'].includes(props.dialogStatus)) {
				let deepItem = _.cloneDeep(props.dialogTableValue)
				getAuditDetail(deepItem);
			}	
		}, { deep: true, immediate: true })
	// 关闭弹窗
	function closeDialog() {
		if (!loading3.value) {
			emit('update:modelValue', false)
		}
	}

	// 获取详情
	function getAuditDetail(row) {
		console.log(row);
		dataInfo.value = row;
		formData.value.id = row.id;	
	}

	// 处理结果
	function doData(act:string){
		let dostatus = 0;
		switch (act) {
		  case 'act_doend':
			dostatus= 1
		    break
		  case 'act_doback':
			dostatus= 2
		    break
		  default:
			ElMessage.error('无效操作')
		}
		if (['act_doend', 'act_doback'].includes(act)){
			// 退回
			var data = {
				mark:formData.value.mark,
				status:dostatus,
				id:formData.value.id
			}
			console.log(data);
			loading3.value = true
			getDocExamine(data).then((res) => {
				loading3.value = false;
				ElMessage({ message:res.msg, type: 'success' })
				closeDialog();
				emit('initRefreshList')
			}).finally(() => {
				loading3.value = false;
			})
		}
	}


	onMounted(() => {
	
	});
</script>

<style lang="scss" scoped>

	.atcBox {
	  background: #ffffff;
		width: 100%;
	  margin: 0 auto;
	  padding: 30px 40px;
	  background: #fff;
	  box-sizing: border-box;
	}
	
	
	.aletlCo {
	  width: 100%;
	 
	  .artleTi {
	    border-bottom: 1px solid #bfbfbf;
	    padding: 8px 0;
	    .artleTiH2 {
	      font-size: 22px;
	      color: #333333;
	      text-align: center;
	      line-height: 28px;
	      font-weight: bold;
	      margin-bottom: 8px;
	    }
	    .artleTiCo {
	      display: flex;
	      justify-content: center;
	      flex-wrap: wrap;
	      .artBs {
	        margin-right: 20px;
	      }
	
	    }
	  }
	  .artleCo {
	    line-height: 2;
	    font-size: 16px;
	    padding: 25px 0;
	   
	  }
	}
	
	.fujian{
	  font-size: 14px;
	  line-height: 30px;
	}
	.fujiana{
	    background-size: 20px 25px;
	  
	    cursor: pointer;
	    color: #2379f7;
	}
	
	.shBox{
	  display: flex;
	  justify-content: space-between;
	 
	  box-sizing: border-box;
	  margin-top: 30px;
	}
</style>